<template>
  <div class="cate_content">
    <van-badge-group
      :active-key="activeKey"
      @change="onChange"
    >
      <van-badge
        v-for="(v,i) in topList"
        :key="i"
        :title="v.categoryName"
      />

    </van-badge-group>

    <ul>
      <li
        v-show="secList.length"
        v-for="(v,i) in secList"
        :key="i"
      >
        <img
          :src="`http://127.0.0.1:3000${v.brandLogo}`"
          alt=""
        >
        <p>{{ v.brandName }}</p>
      </li>
      <li v-show="!secList.length">暂无数据</li>
    </ul>
  </div>
</template>

<script>


import { mobile } from "@/api";

export default {
    data () {
        return {
            activeKey:0,
            topList:[],
            secList:[]

        }
    },
      created () {
    this.getTopList(this.getSecList)
  },

    methods: {
       onChange(key){
           this.activeKey=key
           this.getSecList(this.topList[key].id)
       },
       getTopList(callback){
           mobile.queryTopCategory().then(res => {
               this.topList =res.data.rows
               callback && callback (this.topList[0].id)
           })
       },
      getSecList(id){
          mobile.querySecCategory({
              id:id
          })
          .then(res => {
              this.secList=res.data.rows
          })
      }
    }
}

</script>
<style lang="scss" scoped>
    .cate_content{
        display:flex;
        ul {
            flex:1;
            li{
                float: left;
                width: 33.33%;
                text-align: center;
                img{
                    width: 100%;
                }  
            }
        }
    }
</style>

